/*
  // scss  =====================

  1 定义变量   使用   $                    $score: 75;
  2 定义语法   使用   @                    @if $score{ width: 100px; }
  3 输出信息   使用   @debug               @debug " 输出信息 "
  4 输出错误   使用   @error               @error " 输出错误 "
  5 插值数据   使用   #{ }                 @debug " 输出信息 #{ $score }"    字符串中需要   css样式可以直接使用  无需插值

  6 定义类    使用    @mixin        @mixin test( $size,$flag ){
                                       with:$size;
                                       @if $flag{
                                        height:100px
                                       }
                                     }
  7 使用类    使用    @include + 类名   @include test(5px,true)

  8 遍历 list 使用    @each  in  --  每次循环都是 拿每一个 item   如果有  解构 在对 item 进行解构
    数组
    $sizes: 40px , 60px, 80px;
    @each $size in $sizes {
      @debug "$size "
      .img-#{ $size }{
        font-size: $size
      }
    }
    对象
    $sizes: { "name":"wn" };
     @each $k,$v in $sizes {
      @debug " $k,$v "
    }
    解构 -- 一次只能 解一个  40 null null  60  null null
    $sizes:40px , 60px, 80px;
    @each $a,$b,$c in $sizes {
      @debug " $a,$b,$c "
    }
    解构多值数组 一次一个  a,b 对应  k v
    $sizes: "name" "wn" ,"age" "18" ;
    @each $a,$b in $sizes {
      @debug " $a,$b "  -- name wn   age 18
    }

   $sizes:[ ["name" , "wn"],["age" , "18"] ] ;
   @each $a,$b in $sizes {
        @debug " $a,$b "  -- name wn   age 18
   }

   9  for 循环   使用 @for   through 闭合    to  前闭后开
     @for $i 1 through 4 {
        @debug $i       1 2 3 4
     }

      @for $i 1 to 4 {
        @debug $i       1 2 3
     }

     while 循环  使用 @while

     $i:1;
     @while $i <=6 {
        @debug $i       1 2 3 4 5 6
        $i:$i + 1;
     }

   10 Font-face 规则      黑体     宋体  不管怎么用都--不会侵权
                开源字体  思源中文  roboto英文字体
     使用电脑本地的 字体  不会侵权  电脑本地有就使用 没有就使用默认字体
     如果 加了                   电脑本地有就使用 没有去服务器下载  涉及 版权 传播,会侵权
     定义
     @font-face{
      font-family:微软雅黑;        定义该 字体 名字  提供给 font-family
      src:url("XXX")             本地没有时 使用此字体  一定要 保证  该字体 开源
     }
     使用
     div{
      font-family:微软雅黑;
     }

   11 Media   媒体查询

   @media (min-width:800px){
    body{
      background:red;
    }
   }

   12 Supports

   div{
     position:sticky;
     top:0;
   }
   有些浏览器不支持   所以使用 @supports  支持 就 起作用  不支持 就不生效

   @supports(position:sticky){
    div{
     position:sticky;
     top:0;
   }
   }

   13 函数  @function
   @function test($item){
     @return $item / 2
   }

   div{
    font-size:test(100px)
   }

*/
